import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("../pages/home/HomeIndex"),
    children: [
      {
        path: "/home",
        redirect: "/home/movies",
      },
      {
        path: "movies",
        component: () => import("../pages/home/movies/MoviesIndex"),
        children: [
          {
            path: "/home/movies",
            redirect: "/home/movies/hot",
          },
          {
            path: "hot",
            component: () => import("../pages/home/movies/hot/HotIndex"),
            meta: { requireAlive: true },
          },
          {
            path: "cinema",
            component: () => import("../pages/home/movies/cinema/CinemaIndex"),
            meta: { requireAlive: false },
          },
          {
            path: "wait",
            component: () => import("../pages/home/movies/wait/WaitIndex"),
            meta: { requireAlive: true },
          },
          {
            path: "classic",
            component: () =>
              import("../pages/home/movies/classic/ClassicIndex"),
            meta: { requireAlive: true },
          },
        ],
      },
      {
        path: "video",
        component: () => import("../pages/home/video/VideoIndex"),
        meta: { title: "猫眼视频" },
      },
      {
        path: "mini",
        component: () => import("../pages/home/mini/MiniIndex"),
        meta: { title: "猫眼小视频" },
      },
      {
        path: "show",
        component: () => import("../pages/home/show/ShowIndex"),
        meta: { requireLogin: true, title: "猫眼演出" },
      },
      {
        path: "mine",
        component: () => import("../pages/home/mine/MineIndex"),
        //todo 路由元信息,是一个对象，对象里面自由发挥
        meta: { requireLogin: true, title: "我的猫眼" },
        //todo 路由独享守卫, 用法和全局前置守卫是一样的
        // beforeEnter: (to, from, next) => {
        //   if (localStorage.getItem("token")) {
        //     next()
        //   } else {
        //     next("/login")
        //   }
        // }
      },
    ],
  },
  {
    path: "/detail/:id",
    props: true,
    component: () => import("../pages/detail/DetailIndex"),
  },
  {
    path: "/city",
    component: () => import("../pages/city/CityIndex"),
  },
  {
    path: "/login",
    component: () => import("../pages/login/LoginIndex"),
  },
  {
    path: "*",
    component: () => import("../pages/notfound/NotFound.vue"),
  },
];

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // return { x: 0, y: 0 }
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});

//todo 全局前置守卫
//todo 只要路由发生改变就会执行
router.beforeEach((to, from, next) => {
  //todo to和from表示去的那个页面和来的那个页面的路由信息
  // next调用相当于放行
  //! 路由鉴权
  if (to.meta.requireLogin) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }
  } else {
    next();
  }

  // document.title = to.meta.title || "猫眼电影-娱乐看猫眼";

  // next(false); // 不放行
  // next("/login"); // 重定向
});

//todo 全局解析守卫
// beforeResolve和beforeEach用法和语法完全相同
// 它的调用时机慢一些
// router.beforeResolve((to, from, next) => {});

//todo 全局后置钩子hook
router.afterEach((to) => {
  // ...
  document.title = to.meta.title || "猫眼电影-娱乐看猫眼";
});

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => {
    return err;
  });
};

export default router;
